<script setup>
import { ref } from 'vue'

const { safeAreaInsets } = uni.getWindowInfo()

const to = (e) => {
	uni.navigateTo({
	  url: e,
	})
}

const callPhoneNumber = () => {
	uni.makePhoneCall({
	  phoneNumber: "18219128888"
	})
}

const copySource = () => {
	wx.vibrateShort();
	uni.setClipboardData({
	  data: "https://ext.dcloud.net.cn/publisher?id=356088"
	})
}
</script>

<template>
<view class="my tn-safe-area-inset-bottom">
		
    <view class="top-backgroup">
      <image src='https://resource.tuniaokj.com/images/my/my-bg4.png' mode='widthFix' class='backgroud-image'></image>
    </view>
    
    <view class="tn-margin-left tn-margin-right" :style="{paddingTop: safeAreaInsets?.top + 40 + 'px'}">
      <!-- 图标logo/头像 -->
			<navigator class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom" style="margin-top: -450rpx;" url="/pages-member/settings/settings" hover-class="none">
				<view class="justify-content-item">
					
				  <view class="tn-flex tn-flex-col-center tn-flex-row-left">
				    <view class="logo-pic tn-shadow">
				      <view class="logo-image">
				        <view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg');width: 110rpx;height: 110rpx;background-size: cover;overflow: hidden;">
				        </view>
				      </view>
				    </view>
				    <view class="tn-padding-right">
				      <view class="tn-padding-right tn-padding-left-sm">
				        <text class="tn-color-wallpaper tn-text-xl tn-text-bold">抓住那只猪吖</text>
				        <!-- <text class=" tn-round tn-text-xs tn-bg-red tn-color-white tn-margin-left-sm" style="padding: 10rpx 20rpx;">
				          未实名
				        </text> -->
				      </view>
				      <view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
				        <text class="tn-color-gray">高级UI设计</text>
				        <text class="tn-color-gray tn-padding-left-sm tn-text-sm">139****1193</text>
				      </view>
				    </view>
				  </view>
				</view>
				<view class="justify-content-item">
				  <view class="tn-icon-right tn-color-gray">
				  </view>
				</view>
			</navigator>
			
			<view class="tn-margin-top">
			  <view class="button-number tn-flex tn-flex-row-between tn-flex-col-center tn-shadow-blur" style="background: linear-gradient(-120deg, #3E445A, #31374A, #2B3042, #262B3C);">
			    
			    <view class="tn-margin-left">
			      <view class='title' style="color: #F1C68E;">
			        <text class="tn-text-bold tn-text-xl">开通</text>
			        <text class="tn-icon-vip-text tn-text-center" style="position: absolute;margin: -22rpx 0 0 0;font-size: 92rpx;"></text>
			      </view>
			      <view class='tn-color-white tn-text-sm tn-padding-top-sm'>开通VIP, 享多重专属特权</view>
			    </view>
			    <view class="tn-margin-right">
						<button class="tn-btn-class tn-btn tn-round tn-shadow-blur" aria-disabled="false"
							style="padding:5px 0;font-size:14px;height:33px;width:83px;color:#634738;background-color:#F1C68E;box-shadow:3px 3px 4px #F1C68E10">
							<text class="tn-icon-vip tn-padding-right-sm tn-text-lg"></text>
							<text class="tn-text-bold">开 通</text>
						</button>
			    </view>
			    
			  </view>
			</view>
			
			<!-- 图标或者图片布局，有需要直接显示出来即可，预留的布局 -->
			<!-- 方式15  start-->
			<view class="tn-flex tn-flex-row-between tn-bg-white wallpaper-shadow tn-margin-top">
			  <view class="tn-padding-sm tn-margin-xs" @click="tn('/minePages/release')">
			    <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-margin-left">
			      <view class="icon5__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="background-image:url('https://cdn.nlark.com/yuque/0/2022/png/280373/1666764808285-assets/web-upload/b83d1b36-7355-4f36-bc02-9f06b8c0867c.png');background-size:100% 100%;background-size: cover;">
			      </view>
			      <view class="tn-text-center">
			        <text class="tn-text-ellipsis">发 布</text>
			      </view>
			    </view>
			  </view>
			  <view class="tn-padding-sm tn-margin-xs" @click="tn('/minePages/collect')">
			    <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			      <view class="icon5__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="background-image:url('https://cdn.nlark.com/yuque/0/2022/png/280373/1666764788528-assets/web-upload/955b13dd-7715-4627-b8cc-04ae3d85051a.png');background-size:100% 100%;background-size: cover;">
			      </view>
			      <view class="tn-text-center">
			        <text class="tn-text-ellipsis">排 名</text>
			      </view>
			    </view>
			  </view>
			  <view class="tn-padding-sm tn-margin-xs">
			    <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-margin-right">
			      <view class="icon5__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="background-image:url('https://cdn.nlark.com/yuque/0/2022/png/280373/1666764788454-assets/web-upload/397ee31e-b1b1-44ea-bb4c-0436eee867e5.png');background-size:100% 100%;background-size: cover;">
			      </view>
			      <view class="tn-text-center">
			        <text class="tn-text-ellipsis">资 产</text>
			      </view>
			    </view>
			  </view>
			</view>
			<!-- 方式15 end-->
			
			<!-- 方式20 start-->
			<view class="tn-flex">
				<navigator class="tn-flex-1 wallpaper-shadow tn-bg-white" style="margin: 30rpx 10rpx 0 0;padding: 30rpx 0;" hover-class="none" url="/pages-member/desk/desk">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					  <view class="icon20__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orangered tn-color-white">
					    <view class="tn-icon-computer-fill"></view>
					  </view>  
					  <view class="tn-text-center" style="font-size: 30rpx;">
					    <view class="tn-text-ellipsis">工作台</view>
					  </view>
					</view>
				</navigator>
				<navigator class="tn-flex-1 wallpaper-shadow tn-bg-white" style="margin: 30rpx 0 0 10rpx;padding: 30rpx 0;" hover-class="none" url="/pages-member/order/order">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					  <view class="icon20__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-purplered tn-color-white">
					    <view class="tn-icon-moon-fill"></view>
					  </view>  
					  <view class="tn-text-center" style="font-size: 30rpx;">
					    <view class="tn-text-ellipsis">援军令</view>
					  </view>
					</view>
				</navigator>
			</view>
			
			<!-- 更多信息-->
			<!-- 方式12 start-->
			<view class="wallpaper-shadow tn-margin-top tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
			  <view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">
			    <view class="tn-padding-sm tn-margin-xs tn-radius">
			      <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			        <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
			          <view class="tn-icon-caring" style="color: #080808;"></view>
			        </view>
			        <view class="tn-text-center">
			          <text class="tn-text-ellipsis">违规公示</text>
			        </view>
			      </view>
			    </view>
			    <view class="tn-padding-sm tn-margin-xs tn-radius">
			      <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			        <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
			          <view class="tn-icon-message" style="color: #080808;"></view>
			        </view>
			        <view class="tn-text-center">
			          <text class="tn-text-ellipsis">消息通知</text>
			        </view>
			      </view>
			    </view>
			    <view class="tn-padding-sm tn-margin-xs tn-radius">
			      <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			        <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
			          <view class="tn-icon-ticket" style="color: #080808;"></view>
			        </view>
			        <view class="tn-text-center">
			          <text class="tn-text-ellipsis">积分明细</text>
			        </view>
			      </view>
			    </view>
			    <view class="tn-padding-sm tn-margin-xs tn-radius">
			      <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			        <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
			          <view class="tn-icon-calendar" style="color: #080808;"></view>
			        </view>
			        <view class="tn-text-center">
			          <text class="tn-text-ellipsis">新人教学</text>
			        </view>
			      </view>
			    </view>
			  </view>
			  <view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">
			    <view class="tn-padding-sm tn-margin-xs tn-radius">
			      <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			        <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
			          <view class="tn-icon-order" style="color: #080808;"></view>
			        </view>
			        <view class="tn-text-center">
			          <text class="tn-text-ellipsis">领券中心</text>
			        </view>
			      </view>
			    </view>
			    <view class="tn-padding-sm tn-margin-xs tn-radius">
			      <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			        <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
			          <view class="tn-icon-star" style="color: #080808;"></view>
			        </view>
			        <view class="tn-text-center">
			          <text class="tn-text-ellipsis">活动中心</text>
			        </view>
			      </view>
			    </view>
			    <view class="tn-padding-sm tn-margin-xs tn-radius">
			      <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			        <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
			          <view class="tn-icon-map" style="color: #080808;"></view>
			        </view>
			        <view class="tn-text-center">
			          <text class="tn-text-ellipsis">我的客服</text>
			        </view>
			      </view>
			    </view>
			    <view class="tn-padding-sm tn-margin-xs tn-radius">
			      <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			        <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
			          <view class="tn-icon-set" style="color: #080808;"></view>
			        </view>
			        <view class="tn-text-center">
			          <text class="tn-text-ellipsis">效卫名片</text>
			        </view>
			      </view>
			    </view>
			  </view>
			</view>
			
			<view class="wallpaper-shadow tn-margin-top tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
			  <view class="tn-list-cell-class tn-list-cell tn-list-cell--unlined tn-list-cell--radius">
			  	<view class="tn-flex tn-flex-col-center">
			  	  <view
			  	    class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-15 tn-color-white">
			  	    <view class="tn-icon-logo-tuniao"></view>
			  	  </view>
			  	  <view class="tn-margin-left-sm tn-flex-1">关于我们</view>
			  	  <view class="tn-color-cyan--light tn-icon-link"></view>
			  	</view>
			  </view>
			  <view class="tn-list-cell-class tn-list-cell tn-list-cell--unlined tn-list-cell--radius">
			  	<view class="tn-flex tn-flex-col-center">
			  	  <view
			  	    class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white">
			  	    <view class="tn-icon-light-fill"></view>
			  	  </view>
			  	  <view class="tn-margin-left-sm tn-flex-1">商务合作</view>
			  	  <view class="tn-color-blue--light tn-icon-copy"></view>
			  	</view>
			  </view>
			  <view class="tn-list-cell-class tn-list-cell tn-list-cell--unlined tn-list-cell--radius">
			  	<view class="tn-flex tn-flex-col-center">
			  	  <view
			  	    class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-3 tn-color-white">
			  	    <view class="tn-icon-safe-fill"></view>
			  	  </view>
			  	  <view class="tn-margin-left-sm tn-flex-1">版权所属</view>
			  	  <view class="tn-color-red--light tn-icon-tips"></view>
			  	</view>
			  </view>
			</view>
    </view>
  </view>
</template>

<style lang="scss">
.my{
    max-height: 100vh;
  }
 
  .tn-color-wallpaper{
    color: #1D2541;
  }


  /* 自定义导航栏内容 start */
  .custom-nav {
    height: 100%;
    
    &__back {
      margin: auto 30rpx;
      font-size: 40rpx;
      margin-right: 10rpx;
      flex-basis: 5%;
      width: 100rpx;
      position: absolute;
    }
  }
  /* 自定义导航栏内容 end */

  /* 顶部背景图 start */
  .top-backgroup {
    height: 450rpx;
    z-index: -1;
  
    .backgroud-image {
      width: 100%;
      height: 450rpx;
      // z-index: -1;
    }
  }
  /* 顶部背景图 end */

  
  /* 图标容器5 start */
  .icon5 {
    &__item {
      // width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 0rpx;
      margin: 0rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
      }
    }
  }  

  /* 用户头像 start */
  .logo-image {
    width: 110rpx;
    height: 110rpx;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
  }

  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border: 8rpx solid rgba(255,255,255,0.05);
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    overflow: hidden;
    // background-color: #FFFFFF;
  }

  /* 页面阴影 start*/
  .wallpaper-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }

  /* 页面阴影 end*/
  
  /* 图标容器15 start */
  .icon15 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
  
            
        }
      }
    }
  }
  
  /* 图标容器12 start */
  .tn-three{
      position: absolute;
      top: 50%;
      right: 50%;
      bottom: 50%;
      left: 50%;
      transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
      text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
  }
  .icon20 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
        }
      }
    }
  }
  

/* 积分数字 */
.button-number {
	width: 100%;
	height: 150rpx;
	border-radius: 15rpx;
	position: relative;
	z-index: 1;
	
	&::after {
		content: " ";
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: 0;
		border-radius: inherit;
		opacity: 1;
		transform: scale(1, 1);
		background-size: 100% 100%;
		background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
	}    
}

/* 图标容器12 start */
.icon12 {
	&__item {
		width: 30%;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx;
		margin: 20rpx 10rpx;
		transform: scale(1);
		transition: transform 0.3s linear;
		transform-origin: center center;

		&--icon {
			width: 15rpx;
			height: 15rpx;
			font-size: 50rpx;
			border-radius: 50%;
			margin-bottom: 38rpx;
			position: relative;
			z-index: 1;
			
			&::after {
				content: " ";
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
					
			}
		}
	}
}

/* 图标容器1 start */
.icon1 {
	&__item {
		// width: 30%;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx;
		margin: 20rpx 10rpx;
		transform: scale(1);
		transition: transform 0.3s linear;
		transform-origin: center center;

		&--icon {
			width: 40rpx;
			height: 40rpx;
			font-size: 40rpx;
			border-radius: 50%;
			position: relative;
			z-index: 1;

			&::after {
				content: " ";
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
			}
		}
	}
}

.tn-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  overflow: visible;
  -webkit-transform: translate(0rpx, 0rpx);
          transform: translate(0rpx, 0rpx);
  border-radius: 12rpx;
  margin: 0;
}
  
.tn-list-cell {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	background-color: #FFFFFF;
	color: #080808;
	font-size: 28rpx;
	padding: 26rpx 30rpx;
	
	&--radius {
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	&--arrow {
		&::before {
			content: " ";
			position: absolute;
			top: 50%;
			right: 30rpx;
			width: 20rpx;
			height: 20rpx;
			margin-top: -12rpx;
			border-width: 4rpx 4rpx 0 0;
			border-color: #E6E6E6;
			border-style: solid;
			transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
		}
		
		&--none-right {
			&::before {
				right: 0 !important;
			}
		}
	}
	
	&::after {
		content: " ";
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		pointer-events: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		transform: scaleY(0.5) translateZ(0);
		transform-origin: 0 100%;
	}
	
	&--line-left {
		&::after {
			left: 30rpx !important;
		}
	}
	
	&--line-right {
		&::after {
			right: 30rpx !important;
		}
	}
	
	&--unlined {
		&::after {
			border-bottom: 0 !important;
		}
	}
}
</style>